<template>
  <div id="app">
    <Add @addItem="addItem"></Add>
    <hr/>
    <List :arr="arr"></List>
    <hr/>
    <Footer :arrLength="arrLength"></Footer>
  </div>
</template>

<script>
import Add from './components/Add.vue';
import List from './components/List.vue';
import Footer from './components/Footer.vue';

export default {
  name: 'App',
  data() {
    return {
      arr:["吃饭","睡觉","打豆豆"],
    };
  },
  mounted(){
    // this.$eventBus.$on("emptyArr",this.emptyArr);
    this.$eventBus.$on("emptyArr", () => {
      this.arr = [];
    });
    this.$eventBus.$on("deleteItem",(index)=>{
      this.arr.splice(index,1);
    });
  },
  components: {
    Add,
    List,
    Footer
  },
  methods:{
    addItem(info){
      // 将收集到的数据添加到arr当中
      this.arr.push(info);
    },
  },
  computed:{
    arrLength(){
      return this.arr.length;
    },
  },
};
</script>

<style lang="scss" scoped>
  #app{
    width: 1500px;
    margin: 100px auto;
    border: 2px solid black;
  }
</style>
